<%@ page pageEncoding="utf-8"   isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="${path}/front/css/login.css" rel="stylesheet" type="text/css" />
		<link href="${path}/front/css/page_bottom.css" rel="stylesheet" type="text/css" />
		<%-- <script type="text/javascript" src="${path}/ceshi1/js/jquery-1.8.3.js"></script> --%>
		<script type="text/javascript" src="${path}/back/js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="${path}/front/js/jquery-1.8.3.min.js"></script>
		<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/front/js/jquery-1.8.3.min.js"></script> --%>
		<!-- <script type="text/javascript">
			function selectOne(addressId){
				location.href="${pageContext.request.contextPath}/frontUser/showOne?addressId="+addressId
			}
		</script> -->
		
<script type="text/javascript">
$(function(){
                var emails=false;
				var isOK2=false;
				var isOK3=false;
				var isOK4=false;
				var isOK5=false;

//邮箱验证
				$("#txtEmail").blur(function(){
					//获取email
					var email=$("#txtEmail").val();	
					//判断是否为空
					if(email==""){
						$("#emailMsg").html("邮箱必填");
					}else{
						//判断格式是否正确
						var s=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
						if(s.test(email)){
							$("#emailMsg").html("验证成功").css("color","green");
							emails=true;
						}else{
							$("#emailMsg").html("邮箱格式不正确");
						}
					}
				});
				
				function selectOne(addressId){
				location.href="${pageContext.request.contextPath}/frontUser/showOne?addressId="+addressId
			}
				
				
				//昵称验证
				$("#txtNickName").blur(function(){
					
					//获取email
					var nickName=$("#txtNickName").val();
					
					//判断是否为空
					if(nickName==""){
						$("#nameMsg").html("昵称必填");
					}else{
						
						if(nickName.length>=4 && nickName.length<=7 ){
							$("#nameMsg").html("验证成功").css("color","green");
							isOK2=true;

						}else{
						$("#nameMsg").html("昵称最少4位，最多7位");
						}
					}
				});
				
				//密码验证
				$("#txtPassword").blur(function(){
					//获取email
					var password=$("#txtPassword").val();
					//判断是否为空
					if(password==""){
						$("#passwordMsg").html("密码必填");
					}else{
						if(password.length>=6 && password.length<=20){
							$("#passwordMsg").html("验证成功").css("color","green");
							isOK3=true;
						}else {
							$("#passwordMsg").html("密码最少6位最多20位");
						}
					}
				});
				
				//确认密码验证
				$("#txtRepeatPass").blur(function(){
					//获取email
					var repeatPass=$("#txtRepeatPass").val();
					//判断是否为空
					if(repeatPass==""){
						$("#password1Msg").html("密码必填");
					}else{
						//获取密码
						var password=$("#txtPassword").val();	
						//判断密码是否一致
						if(repeatPass==password){
							$("#password1Msg").html("验证成功").css("color","green");
							isOK4=true;
						}else{
							$("#password1Msg").html("密码不一致");
						}
					}
				});
			
				
				//验证码校验
				$("#txtVerifyCode").blur(function(){
					//获取email
					var txtVerifyCode=$("#txtVerifyCode").val();
					//判断是否为空
					if(txtVerifyCode==""){
						$("#numberMsg").html("验证码必填");
					}else{
						if(txtVerifyCode.length==4){
							$("#numberMsg").html("验证成功").css("color","green");
							isOK5=true;
						}else{
							$("#numberMsg").html("验证码必须4位").css("color","red");
						}
					}
				});
				
				$("form").submit(function(){
					
					
					//将所有的表单验证验证一遍，
					$("input").trigger('blur');
					//alert(email && isOK2 && isOK3 && isOK4 && isOK5);
					/* alert("emails"+emails);
					alert("isOK2"+isOK2);
					alert("isOK3"+isOK3);
					alert("isOK4"+isOK4);
					alert("isOK5"+isOK5);  */
					//判断是否验证通过
					if(emails && isOK2 && isOK3 && isOK4 && isOK5){
						
						//提交表单
						$("form").submit();
					}else{
						return false;
					}
				});
				
});







//验证码显示图片的
$(function(){
			$("#imgVcode").click( function(){ changeImage(); } );
		
		});
		
		function changeImage(){
			$("#imgVcode").prop("src","${pageContext.request.contextPath }/code/codea?"+new Date().getTime());
		}
		
		
		

</script>
		
	</head>
	<body>
		<%@include file="/front/common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action="${path}/frontUser/addFrontUser" id="f">
				<h2>
					以下均为必填项   &emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;<span style="color:red">${qqq}</span>
				</h2>
				<table class="tab_login" >
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
								<input name="fuser.email" type="text" id="txtEmail" class="text_input"  onchange="selectOne(this.value)" value="${password}" />
						
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
									<span id="emailMsg" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="fuser.nick_name" type="text" id="txtNickName" class="text_input" />
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="nameMsg" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="fuser.password" type="password" id="txtPassword" class="text_input" />
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="passwordMsg" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="password1" type="password" id="txtRepeatPass" class="text_input"/>
							<div class="text_left" id="repeatPassValidMsg">
							<span id="password1Msg" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
						<img id="imgVcode" src="${path}/code/codea" class="yzm_img" onClick="changeImage()">
							<!-- <img class="yzm_img" id='imgVcode' src="#" /> -->
							<input name="number" type="text" id="txtVerifyCode" class="yzm_input"/>
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
									<span id="numberMsg" style="color:red"></span>
									<a id="vcodeImgBtn" name="change_code_link" class="code_picww" href="javascript:changeImage()">看不清楚？换个图片</a> 
								<!-- 	<a href="#" id="changeImg">看不清楚？换个图片</a> -->
								</p>
							</div>
						</td>
					</tr>
				</table>

				<div class="login_in">

					<input id="btnClientRegister" class="button_1" name="submit"  type="submit" value="注 册"/>
				</div>
			</form>
		</div>
		<%@include file="/front/common/foot1.jsp"%>
	</body>
</html>

